<template>
  <el-card style="max-width: 100%" shadow="hover">用户管理</el-card>
  <!--选择栏部分-->
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
          <el-col><div class="select_left">
            <el-input v-model="query.user_id" style="width: 150px" placeholder="用户ID" />&nbsp;&nbsp;
            <el-input v-model="query.user_name" style="width: 150px" placeholder="用户昵称" /> &nbsp;&nbsp;&nbsp;&nbsp;
            <el-button default type="primary" :icon="Search" @click="onSubmit">查询</el-button>
          </div> </el-col>
      </div>
    </template>

    <!--内容呈现部分-->
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column fixed prop="user_id" label="用户ID" width="150" />
      <el-table-column prop="user_image" label="头像" width="180">
        <template #default="{ row }">
          <img v-if="row.user_image"
               :src="`http://localhost:8080/image/upload/${row.user_image}`"
               alt="user_image"
               style="width: 50%; height: auto;border-radius: 50%;">
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="昵称" width="120" />
      <el-table-column prop="role" label="角色">
        <template #default="scope">
          {{ scope.row.role==1?"管理员":"用户" }}
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template #default="scope">
          {{ scope.row.gender==1?"男":"女" }}
        </template>
      </el-table-column>
      <el-table-column prop="registration_date" label="注册时间" width="200" />
      <el-table-column fixed="right" label="操作" width="170">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button  default type="success" size="small" :icon="FolderOpened" @click="openDialogDetailFormVisible(scope.row.user_id)">
            查看详情
          </el-button>
       <!--<el-button  type="danger" size="small" @click="dialogUpdateFormVisible(scope.row.user_id)">修改</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <!--显示用户信息详情对话框-->
  <el-dialog v-model="dialogDetailFormVisible" title="用户信息详情" width="700">
    <el-form :model="formDetail">
      <el-form-item label="头像:" :label-width="formLabelWidth">
        <img :src="`http://localhost:8080/image/upload/${formDetail.user_image}`"
             alt="user_image"
             style="width: 100%; height: auto; width:200px ">
      </el-form-item>
      <el-form-item label="账户ID:" :label-width="formLabelWidth">
        {{formDetail.user_id}}
      </el-form-item>
      <el-form-item label="昵称：" :label-width="formLabelWidth">
        {{formDetail.user_name }}
      </el-form-item>
      <el-form-item label="角色：" :label-width="formLabelWidth">
        <template #default>
          {{ formDetail.role==1?"管理员":"用户" }}
        </template>
      </el-form-item>

      <el-form-item label="性别：" :label-width="formLabelWidth">
        <template #default>
          {{ formDetail.gender==1?"男":"女" }}
        </template>
      </el-form-item>
      <el-form-item label="邮箱：" :label-width="formLabelWidth">
        {{ formDetail.email }}
      </el-form-item>
      <el-form-item label="出生日期：" :label-width="formLabelWidth">
        {{formDetail.birthday}}
      </el-form-item>
      <el-form-item label="电话：" :label-width="formLabelWidth">
        {{formDetail.phone}}
      </el-form-item>
      <el-form-item label="注册时间：" :label-width="formLabelWidth">
        {{formDetail.registration_date }}
      </el-form-item>
      <el-form-item label="地址：" :label-width="formLabelWidth">
        {{formDetail.address }}
      </el-form-item>
      <el-form-item label="自我介绍：" :label-width="formLabelWidth">
        {{formDetail.selfintro }}
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="dialogDetailFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>



<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import {FolderOpened, Search} from "@element-plus/icons-vue";
export default{
  components:{
    Search,
    FolderOpened
  },
  computed: {
    FolderOpened() {
      return FolderOpened
    },
    Search() {
      return Search
    }
  },
  data(){
    return{
      num :0 ,
      form:{             //查询
        user_id: 0,
        user_name:'',
      },    //用于存储点击按钮后获取行数据
      formLabelWidth: '180px',  //对话框宽度
      currentPage:1,             //分页默认为第一页
      pageSize:5,
      pageInfo:{},                   //拿到page对象
      large:true,
      background: true,
      dialogDetailFormVisible:false, //查看详情对话框
      query:{                 //查询条件
        user_name:"",
        user_id:null,
      },
      tableData:[] , //用户个人信息数据
      formDetail:{},    //用户详细信息
      pageDate:[]
    }
  },
  methods:{
    openDialogDetailFormVisible(user_id){
      this.dialogDetailFormVisible = true;
      this.form.user_id = user_id;
      console.log(this.form.user_id);
      this.$http.get("http://localhost:8080/user/showdetailuserinfo",{params:{
          user_id:this.form.user_id,
        }}).then((res)=>{
        this.formDetail= res.data;
        console.log(this.formDetail);
      }).catch(function (err) {
        console.log(err);
      })
    },


    onSubmit(){                     //查询提交
      console.log(this.query);
      this.LoadUpdateUserData();
    },

    //跨域连接查询用户信息修改的数据对接
    LoadUpdateUserData(){
      this.$http.get("http://localhost:8080/user/detailuserinfo",{params:{
          user_id:this.query.user_id,
          user_name:this.query.user_name,
        }}).then((res)=>{
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    },
  },
  //被挂载,调用自定义函数
  mounted() {
    this.LoadUpdateUserData()
  }
}
</script>


<style>
.select_left{
  display: flex;
  justify-content: left;
}
.select_right{
  display: flex;
  justify-content: right;
}
</style>
